/**
 * menu component
 */
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

import { MenuService } from './service.menu';

@Component({
    selector: 'wf-menu',
    templateUrl: './template.menu.html',
    providers: [
        MenuService
    ]
})
export class MenuComponent implements OnInit {
    menus: object[];

    constructor(private menuService: MenuService, private router: Router) {

    }
    public ngOnInit(): void {
        this.menus = this.getAllMenu();
    }

    private getAllMenu(): object[] {
        return this.menuService.getMenu();
    }

    protected toggleMenu($event: any) {
    }
}

@Component({
    selector: 'wf-menu-item',
    templateUrl: './template.menu-item.html'
})
export class MenuItemComponent {
    @Input() menu: object;

    @Output() menuHover: EventEmitter<any> = new EventEmitter<any>();
    @Output() toggleMenu: EventEmitter<any> = new EventEmitter<any>();

    expanded: boolean = false;

    constructor() { }

    /**
     * 菜单经过效果
     */
    protected onMenuHover($event: object, menu: object): void {
        Object.assign($event, { menu });
        this.menuHover.emit($event);
    }

    /**
     * 菜单展开效果
     */
    protected onToggleMenu($event: object, menu: object): void {
        Object.assign($event, { menu });
        this.toggleMenu.emit($event);
        this.expanded = !this.expanded;
    }
}